<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scroll demo</title>
  <style>
      *{margin: 0;}
  /*div {
    color: blue;
  }*/
  p {
    color: green;
  }
  span {
    color: red;
    display: none;
  }
  /*section{
      height: 1100px;
      border: 1px solid springgreen;
      position: relative;
  }*/
  h3{
      height: 30px;
      border: 1px solid red;
      position: absolute;
      top: 780px;
  }
  /*div{
      border: 1px solid green;
      height: 300px;
      position: absolute;
      transition: transform 3s  linear;
      bottom: 0;
  }*/
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
 <!--<section>
     
 <div>想加载的时候出来</div>
 </section>-->
<h3>当到我这里 就显示</h3>
<script>
//  $('div').show()
$(function(){
    $(window).scroll(function(){  //当元素滚动的时候调用该方法
//  console.log($(window).scrollTop())  //卷上去的高度
        var h3_height = $("h3").offset().top;
        var this_scrollTop = $(this).scrollTop();
//      console.log(this_scrollTop)
//      console.log(h3_height)
        // 当浏览器卷上去的高度大于 H3所设置的高度,就会运行该条件
                if(this_scrollTop>h3_height ){
                
                $("div").fadeToggle(1500);
                $("div").css('transform','translateX(300px)')
//              console.log('到这里了吗')

            }
            else{
                
                $("div").fadeOut(1000);
                $("div").css('transform','translateX(0px)')
            }
        
    });
});
</script>
 
</body>
</html>